<template>
  <HerinContainer class="MainCoal-box" :delay="1" direction="Right" title="锚杆状态分析">
    <!-- tab按钮 -->
    <div slot="tab" class="MainCoal-box-tab">
      <div
        v-for="(item, i) in titletab"
        :key="i"
        :class="['btn', isbtn === item ? 'isbtn' : '']"
        @click="clickTitleTab(item)"
      >
        {{ item }}
      </div>
    </div>
    <!-- 内容区 -->
    <div slot="content" class="MainCoal-box-content">
      <div class="content-top">
        <div class="top-title">{{ isbtn === '左侧' ? '左外侧锚杆' : '右外侧锚杆' }}</div>
        <div class="content-box">
          <div class="box-top">
            <img width="100" height="100" src="@/assets/img/excavation/bg-icon.png" alt="" />
            <span class="num">1.2</span>
          </div>
          <div class="box-bottom">
            <span class="num">0.4</span>
          </div>
        </div>
      </div>
      <div class="content-center">
        <div class="center-item" v-for="(item,index) in lists" :key="index">
          <div class="title">{{item.title}}</div>
          <div>
            <span class="value">{{item.value}}</span>
            <span class="cam" v-if="item.cam">{{item.cam}}</span>
          </div>
        </div>
      </div>
      <div class="content-bottom">
        <div class="bottom-title">{{ isbtn === '左侧' ? '左内侧锚杆' : '右内侧锚杆' }}</div>
        <div class="content-box">
          <div class="box-top">
            <img width="100" height="100" src="@/assets/img/excavation/bg-icon.png" alt="" />
            <span class="num">0.9</span>
          </div>
          <div class="box-bottom">
            <span class="num">0.6</span>
          </div>
        </div>
      </div>
    </div>
  </HerinContainer>
</template>

<script>
import HerinContainer from '@/components/HerinContainer';
export default {
  data() {
    return {
      titletab: ['左侧', '右侧'],
      isbtn: '左侧'
    };
  },

  components: {
    HerinContainer
  },

  computed: {
    lists() {
      return [
        { title: '当前点煤层硬度', value: 2.1, cam: '' },
        { title: '系统压力', value: 15, cam: 'Mpa' },
        { title: '顶支护点', value: 3200, cam: 'mm' },
        { title: '旋转压力', value: 92, cam: 'Mpa' },
        { title: '供给点', value: 231, cam: 'mm' },
        { title: '钻孔深度', value: 2000, cam: 'mm' },
        { title: '供给速度', value: 73, cam: '%' },
        { title: '拧紧压力', value: 221, cam: 'Mpa' }
      ];
    }
  },

  methods: {
    clickTitleTab(item) {
      this.isbtn = item;
    }
  }
};
</script>
<style scoped lang="scss">
.MainCoal-box {
  &-tab {
    display: flex;
    .btn {
      @include btn;
    }
    .isbtn {
      background-color: rgba(0, 228, 255, 0.2);
      color: $cyan;
    }
  }
  .content-top{
    height: 9rem;
    .top-title{
      height: .875rem;
      font-size: .75rem;
      color: #D8D8D8;
    }
  }
  .content-center{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .center-item{
      width: 10rem;
      height: 2.375rem;
      border-radius: .25rem;
      background-color: #273443;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .625rem;
      box-sizing: border-box;
      margin-bottom: .625rem;
      .title{
        color: #D8D8D8;
        font-size: .875rem;
      }
      .value{
        font-size: .875rem;
        color: #ffffff;
        margin-right: .3125rem;
      }
      .cam{
        font-size: .75rem;
        color:#8D8D8D ;
      }
    }
    .center-item:nth-last-of-type(-n+2){
      margin-bottom: .9375rem;
    }
  }
  .content-bottom{
    height: 9rem;
    .bottom-title{
      height: .875rem;
      font-size: .75rem;
      color: #D8D8D8;
    }
  }
  .content-box{
    width: 8.4375rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .box-top{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
    .box-bottom{
      text-align: center;
      line-height: 100px;
    }
    .num{
      font-size: 1rem;
      color: #FFFFFF;
    }
  }
}
</style>
